<template>
  <div class=" p-2 rounded-md m-2 gap-2 flex-col flex" style="border: 1px solid rgba(31, 31, 31);">
    <div class="flex justify-between">
      <div>
        {{ title }}
      </div>
      <div class="text-red-500" v-if="like">
        雇主好评率:<text>{{ like / (like + dislike) * 100 }}%</text>
      </div>
    </div>

    <div class="flex gap-4">
      <div class=" rounded-md px-2 p-1 text-[#52AC29]" v-if="headCount" style="border: 2px solid #52AC29;">
        {{ headCount }}人
      </div>
      <div class=" rounded-md px-2 p-1 text-[#CA56E6]" v-if="workTime" style="border: 2px solid #CA56E6;">
        {{ workTime }}天工期
      </div>
      <div class=" rounded-md px-2 p-1 text-[#0F40F5]" v-if="remarks" style="border: 2px solid #0F40F5;">
        {{ remarks }}
      </div>
    </div>

    <div class="text-gray-500">
      开工时间: {{ dayjs(startTime).format("YYYY-MM-DD HH:mm") }}
    </div>

    <div class="flex gap-2 items-center">
      <image class="w-4 h-4" src="/static/location.png" />
      {{ location }}
    </div>

    <div class="flex justify-between items-center">
      <div class="text-red-500 font-bold">
        ￥{{ price }}
      </div>
      <div class="flex gap-2">
        <button @touchend="handleSwitch">
          详情
        </button>
        <ButtonStar :_id="_id" />
      </div>
    </div>

  </div>
</template>

<script setup>
import dayjs from 'dayjs'
import ButtonStar from './ButtonStar.vue';

const props = defineProps({
  _id: String,
  title: String,
  feedback: Number,
  headCount: Number,
  workTime: Number,
  remarks: String, //备注
  startTime: Number, //时间戳
  location: String,
  price: Number,
  status: String,
  like: {
    type: Number,
    default: 0
  },
  dislike: {
    type: Number,
    default: 0
  }
})
function handleSwitch() {
  uni.navigateTo({ url: '/pages/requirements/requirements?id=' + props._id })
}
</script>